<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">    
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="./css/style.min.css">
    <link rel="stylesheet" href="./js/lib/swiper.min.css">
    <title>店铺首页</title>
    <style type="text/css">
        .search-bar {
            z-index: 20;
            width: 100%;
        }
        .searchShow {
            height: 32px!important;
            padding: 10px 0!important;
        }
        .search-bar {
            border-top: 1px solid #ddd;
            height: 0;
            padding: 0;
            overflow: hidden;
        }
        #home-pg .search-bar .search-inp-wrap {
            padding: 0;
            padding-right: 10px;

        }
    </style>
</head>
<body>
<div id="home-pg" class="cl">
    <header class="cl">
            <div class="nav-bar cl" v-show="header.show">
                <!-- <span class="goback arrow_l" ></span> -->
                <span class="page-name" v-cloak>{{shop_name}}</span>
            </div>
        </header>
        <div class="top-banner" v-show="!search_show">
            <span class="logo"><img :src="shop_logo" ></span>
            <i class="search-ico" @click="showSearchBar" v-show="!searchBarShow"></i>
        </div>
        <div class="search-bar" :class={'searchShow':searchBarShow}  v-cloak>
            <div class="search-inp-wrap cl">
                <i class="search-cls" @click="showSearchBar"></i>
                <div class="form-col search-inp">
                    <input type="text"  placeholder="搜索店铺内商品名/品牌" v-model="keyword"  @blur="search_blur" @keyup.enter="search_fn">
                    <button type="button" @click="search_fn"><i class="search-ico"></i></button>
                </div>
            </div>
        </div>
        <dl v-show="!search_show" class="cl">
            <dd class="images-wrap">
                <div class="swiper-container swiper-container-horizontal carousel">
                <div class="swiper-wrapper"  v-if="default_shop">
                            <div class="swiper-slide" v-for="item in carousel.data"><img :src="item.template_content" ></div>
                </div>
                <div class="swiper-wrapper" v-else>
                        <div class="swiper-slide" ><img src="http://static.jdhtest.jdhui.com/asset/2.0/main/images/shoptpl/membershop/1/1.jpg"></div>
                            <div class="swiper-slide" ><img src="http://static.jdhtest.jdhui.com/asset/2.0/main/images/shoptpl/membershop/1/2.jpg"></div>
                </div>

                    <div class="swiper-pagination   swiper-pagination-fraction"></div>
            </div>
            </dd>
            <floor-list :list="floor" :idx="idx" v-for="(floor,idx) in goods_data.data" ></floor-list>
            <dd class="nodata" v-if="!default_shop" v-cloak>{{loading_tips}}</dd>
        </dl>
        <div class="t-footer">
            <ul class="t-ul-box counts-ul-box">
                <li><a :href="home_link" class="t-home"><i class="on"></i>首页</a></li>
                <li><a :href="cate_link" class="t-classification"><i class=""></i>分类</a></li>
                 <li>
                    <a :href="coupon_link" class="t-coupon">
                        <!-- <span class="counts" v-cloak >{{count}}</span>  -->
                        <i class=""></i>
                        优惠券
                        </a>
                </li>
                <li><a :href="cart_link" class="t-shopping-cat"><span class="counts" v-cloak v-if="cart_counts>0">{{cart_counts}}</span><i class=""></i>购物车</a></li>
                <li><a :href="mycenter_link" class="t-my"><i class=""></i>我的</a></li>
            </ul>
        </div>
        <div class="placebox"></div>
    <toast ref="toast"></toast>
</div>
    <script type="text/template" id="floor-list">
        <dd class="floor" v-if="!isNaN(idx)" >
                <h3 v-cloak><span class="icon-wrap"><i class="before"></i></span><span class="floor-title">{{list.title}}</span><span class="icon-wrap"><i class="after"></i</span></h3>
                <div class="list-wrap swiper-container swiper-container-horizontal list-carousel" v-show="list.goods.length>0">
                    <ul class="swiper-wrapper"  ><!--  :style="{width: item_width+'px'}" -->
                            <li v-for="(item,i) in list.goods" class="swiper-slide" v-if="item.goods_detail">
                                <div class="inner-wrap">
                                    <a :href="cpu_goodslink(item.goods_detail&&item.goods_detail.goods_id)">
                                        <div class="goods-img">
                                            <img :src="item.goods_detail&&item.goods_detail.goods_img" >
                                        </div>
                                        <span class="goods-title" v-cloak>{{item.goods_detail?item.goods_detail.goods_name:""}}</a>
                                        <p><span class="price" v-cloak>￥{{parseFloat(item.goods_detail&&item.goods_detail.source==1?item.fxx.min_price:item.goods_detail&&item.goods_detail.min_price||0).toFixed(2)}}</span></p>
                                    </a>
                                </div>
                            </li>
                    </ul>
            </div>
            <a href="#" class="view-more" @click.prevent="view_more(list.id)" v-show="list.goods.length>0">查看更多</a>
            <div class="mid-banner" v-if="idx==1" @click="redirectList"><img src="./images/mid-banner.png"></div>
        </dd>
        </script>
    <script src="./js/lib/vue.js"></script>
    <script src="http://static.jdhui.com/lib/vue-resource/1.2/vue-resource.js"></script>
    <script src="./js/min/config.min.js"></script>
    <script type="text/javascript" src="./js/min/common.min.js"></script>
     <script src="./js/min/component.min.js"></script>
    <script src="./js/lib/swiper.min.js"></script>
    <script src="http://js.jdhui.com/common/weixin.js"></script>
    <script>
    var store_id=APP.getQueryString("storeid");
    var _title=document.getElementsByTagName('title')
    if (store_id==""||store_id==null) {
        store_id=APP.getCookie("shopid");
        if (store_id==""||store_id==null) {
            store_id="";
        }
    }
     Vue.component('floor-list',{
        template: "#floor-list",
        props:['list','idx'],
        data: function () {
            return{
                item_width: ""
            }
        },
        mounted: function(){
            setTimeout(function(){
                this.set_width_fn();
            }.bind(this),500)
        },
        methods: {
            set_width_fn: function () {
                var _len=0;
                if (this.list&&this.list.goods) {
                   for (var i = 0; i < this.list.goods.length; i++) {
                    if (this.list.goods[i].goods_detail) {
                        _len++
                    }
                    } 
                }
                
                this.item_width=_len*130+5;
            },
            cpu_goodslink: function (m) {
                return "goods-detail.html?storeid="+store_id+"&id="+m
            },
            view_more: function (m) {
                window.location.href="goods-list.html?storeid="+store_id+"&floor="+m;
            },
            redirectList:function () {
                window.location.href="goods-list.html?storeid="+store_id
            }
        },
        computed: {

        }
    })
    var loginlink=document.getElementById('loginlink');
    var toast = new component.popup.toast();
    // loginlink.setAttribute("href","login.html?storeid="+store_id);
    Vue.http.options.xhr = {
                withCredentials: true
            }
    Vue.http.options.credentials = true;
    	
    var idxpg=new Vue({
        el: "#home-pg",
        data: {
                shop_logo:"",
                shop_name:"",
                scrolled: false,
                set_position: {
                    position:"",
                    top: "0px"
                },
                header: {
                    show: !APP.iswechat()
                },
                search_show: false,
                goods_data:{},
                carousel:"",
                cart_counts:0,
                keyword:"",
                home_link:"home.html?storeid="+store_id,
                cate_link:"category.html?storeid="+store_id,
                coupon_link:"c-call-center.html?storeid="+store_id,
                cart_link:"cart.html?storeid="+store_id+'&version='+APP.version,
                mycenter_link:"personal-center.html?storeid="+store_id,
                searchBarShow:false,
                loading_tips:'数据加载中...'

        },
         component: {
            'toast': toast
        },
        mounted: function () {
            APP.init(this,false,function (arg){
               this.shop_logo = arg.body.data.shop.shop_logo;
               this.shop_name = arg.body.data.shop.shop_name;
               _title[0].innerText=this.shop_name;
           }.bind(this));
            Vue.http.get(APIPHP+"index.php?r=home/index/carousel&storeid="+store_id).then(function (_res) {
                if (_res.body.error_code==0) {
                    idxpg.carousel=_res.body;
               setTimeout(function () {
                var mySwiper = new Swiper ('.carousel', {
                    loop: true,
                    pagination: '.swiper-pagination'
                  }) 
               },2000)
           }
               
            });
            Vue.http.post(APIPHP+'index.php?r=home/index/diy&storeid='+store_id,{emulateJSON: true}).then(function (_res) {
                if (_res.body.error_code==0) {
                   idxpg.goods_data=_res.body; 
               }else{
                    idxpg.loading_tips="没有更多数据了"
                    return;
               }
                
                setTimeout(function () {
                var mySwiperlist = new Swiper ('.list-carousel', {
                    slidesPerView: 'auto',
                    spaceBetween: 0,
                    freeMode: true,
                    freeModeMomentumBounce:true,
                    resistance:true
                  }) 
                new WeiXin(function() { //微信分享功能
                    var
                    title = idxpg.shop_name,
                    desc = '精选商品，尽在'+idxpg.shop_name,
                    link = window.location.protocol + "//" + window.location.host + window.location.pathname + window.location.search,
                    imgUrl =idxpg.shop_logo;

                    wx.onMenuShareAppMessage({
                        title: title,
                        desc: desc,
                        link: link,
                        imgUrl: imgUrl
                    });
                    wx.onMenuShareTimeline({
                        title: title + " - " + desc,
                        link: link,
                        imgUrl: imgUrl
                    });
                }, {
                    //jsApiList: [],
                    host: "http://www.jdhui.com/api/common/wechat/share-config?shareurl=",
                    status: "error_code",
                    success: 0
                });
                // mySwiperlist.slides[0].style.width='130px';
               }.bind(this),2000)
            });
            Vue.http.get(APIJAVA + 'c/mobile/cart/count?shopId=' + store_id).then(function(_res) { //获取购物车数量
                    idxpg.cart_counts = _res.body.obj;
                }, function(_res) {
                     idxpg.$refs.toast.show("无法获取购物车数量，请刷新重试");
                });
            
            
        },
        methods: {
              handleScroll:function () {
                this.scrolled = window.scrollY > 0;
              },
              showSearchBar:function () {
                this.searchBarShow=!this.searchBarShow;  
              },
            cpuedurl: function (m) {
                return JDHIMG+m;
            },
              search_focus:function () {
                  this.search_show=true
              },
              search_blur:function () {
                  this.search_show=false
              },
            search_fn: function() {
                    window.location.href = 'goods-list.html?storeid=' + store_id + '&keyword=' + this.keyword;
                },
            },
            computed:{
                default_shop:function(){
                    return this.carousel&&this.carousel.data&&this.carousel.data.length>0;
                }
            },
            created:function () {
              window.addEventListener('scroll', this.handleScroll);
            },
            destroyed:function () {
              window.removeEventListener('scroll', this.handleScroll);
            }

    })
window.onload=function () {
        document.addEventListener('touchstart',function (event) {
            if(event.touches.length>1){
                event.preventDefault();
            }
        })
        var lastTouchEnd=0;
        document.addEventListener('touchend',function (event) {
            var now=(new Date()).getTime();
            if(now-lastTouchEnd<=300){
                event.preventDefault();
            }
            lastTouchEnd=now;
        },false)
    }

    </script>
</body>

</html>
